<template>
  <div class="tenance">
    <headnav></headnav>
    <div class="tenancemain">
      <div class="surface"> 
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="模型主题">
            <el-input v-model="formInline.model" placeholder="模型主题"></el-input>
          </el-form-item>
          <el-form-item label="模型名称">
            <el-input v-model="formInline.name" placeholder="模型名称"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
             <el-date-picker
              v-model="formInline.time"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button-group class="btngroup">
        <el-button type="primary" icon="el-icon-plus" @click="add()" >新增</el-button>
         <el-button @click="examine(0)" type="primary" icon="el-icon-check" >审核通过</el-button>
        <el-button @click="examine(1)" type="primary" icon="el-icon-back">审核不通过</el-button>
        <el-button type="primary" icon="el-icon-refresh">刷新</el-button>
      </el-button-group>
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        prop="modelTopic"
        label="模型主题"
        align="center"
        width="100">
        <template  slot-scope="scope">
              <a @click="watchSurface(scope.row.modelTopic)" class="surfaceA" href="javascript:;">{{scope.row.modelTopic}}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="modelCode"
        label="模型英文名"
        align="center"
        width="110">
      </el-table-column>
      <el-table-column
        prop="modelName"
        width="110"
        align="center"
        label="模型中文名">
      </el-table-column>
      
      <el-table-column
        prop="modelDesc"
        label="模型说明"
        align="center"
       >
      </el-table-column>
      
      <el-table-column
        label="新建时间"
        align="center"
        width="150">
         <template slot-scope="scope">{{ scope.row.insertTm | formatDate  }}</template>
      </el-table-column>
      <el-table-column
        prop="modelPartitionDesc"
        label="分区说明"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="modelVer"
        align="center"
        label="当前版本数"
        width="100">
      </el-table-column>
      <el-table-column
        prop="examinestate"
        label="审核状态"
        align="center"
        width="80">
         <template slot-scope="scope">{{ scope.row.examinestate | formatIncre  }}</template>
      </el-table-column>
        <el-table-column
        prop="states"
        label="初始化"
        align="center"
        width="80">
         <template slot-scope="scope">{{ scope.row.states | formatState  }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="300">
        <template  slot-scope="scope">
            <el-button @click="editrow(scope.row)" type="success" icon="el-icon-edit" size="mini">编辑</el-button>
            <el-button @click="addfiledrow(scope.row)" type="primary" icon="el-icon-plus" size="mini">新增宽表</el-button>
            <el-button @click="cleaned(scope.row.id)" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="page"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 15, 20, 25]"
    :page-size="10"
    layout="total, sizes, prev, pager, next, jumper"
    :total="1">
    </el-pagination>
    <el-dialog :title="diaTitle" :visible.sync="isTable">
        <el-table :data="tableList2" >
      <template v-for="(col,index) in cols">
        <el-table-column  :prop="col.prop" :label="col.label" :key="index" >
        </el-table-column>
      </template>
      
        </el-table>
        <el-pagination
        class="page"
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
    </el-dialog>
    <el-dialog title="新增数据模型" :visible.sync="formDia">
        <el-form :model="form">
            <el-form-item label="模型主题" :label-width="formLabelWidth">
            <el-input v-model="form.modelTopic" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="模型英文名" :label-width="formLabelWidth">
            <el-input v-model="form.modelCode" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="模型中文名" :label-width="formLabelWidth">
            <el-input v-model="form.modelName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="模型说明" :label-width="formLabelWidth">
            <el-input v-model="form.modelDesc" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="审核人" :label-width="formLabelWidth">
              <el-select v-model="form.examinename" placeholder="请选择">
              <el-option label="张三" value="1"></el-option>
              <el-option label="李四" value="0"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="分区说明" :label-width="formLabelWidth">
            <el-input v-model="form.modelPartitionDesc" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addForm()">确 定</el-button>
        </div>
    </el-dialog>
    </div>
     
  </div>
</template>

<script>
import headnav from '@/components/HeadNav'
import {formatDate} from '@/utils/dateFomart'
export default {
  name: 'tenance',
  components:{
    headnav
  },
   data () {
    return {
        surface:'',
        currentPage:1,
        isTable:false,
        formDia:false,
        diaTitle:"",
        formInline:{
          name:"",
          model:'',
          time:''
        },
       tableData: [{
                  groupId: 1,
                  id: 1,
                  insertTm: 1535097100000,
                  modelDesc: "dws测试001",
                  modelIncre: "0",
                  modelName: "dws_test_001",
                  modelPartitionDesc: "dt",
                  modelTopic: "dws",
                  modelVer: 1
            }],
        cols:[
        {
          label:"编号",
          prop:"node",
          type:"normal",

        },
        {
          label:"名称",
          prop:"name",
          type:"normal",
          
        },
        {
          label:"类型",
          prop:"type",
          type:"normal",
          
        },
        {
          label:"坐标",
          prop:"coorid",
          type:"normal",
          
        }
      ],
       tableList2:[
        {
          node:"55",
          name:"99",
          type:"qq",
          coorid:"rr"
        },
        {
          node:"66",
          name:"uu",
          type:"ub",
          coorid:"rr"
        }
      ],
      form: {
            modelCode:'',
            modelDesc: "",
            modelIncre: "",
            modelName: "",
            modelPartitionDesc: "",
            modelTopic: "",
            examinename:""
        },
        formLabelWidth: '120px'
    }
  },
  filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        },
        formatIncre(incre){
          console.log(incre);
          if(incre==0){
            return "未审核"
          }else{
            return "已审核"
          }
        },
        formatState(incre){
          console.log(incre);
          if(incre==0){
            return "是"
          }else{
            return "否"
          }
        }
    },
  methods:{
    onSubmit(){

    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      editrow(item){
          this.formDia=true;
          this.form=item;
         
      },
      addfiledrow(){
         this.$router.push({path:"/addModelFiled",query:{title:"新增模型",activenavIndex:"2",handle:"add"}})
      },
      add(){
       this.formDia=true;

      },
      addForm(){
        this.form.insertTm=new Date();
        this.form.modelVer=1;
        this.form.id=this.tableData.length;
        this.tableData.push(this.form);
        this.formDia=false;
      },
      examine(num){
        if(num==0){
          this.$message({
            type: 'success',
            message: '审核成功!'
          });
        }else{
          this.$prompt('请输入审核未通过理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
           
            inputErrorMessage: '邮箱格式不正确'
          }).then(({ value }) => {
            this.$message({
              type: 'success',
              message: '你输入的未通过理由是 ' + value
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });       
          });
        }
        
      },
      watchSurface(val){
        this.$router.push({path:"/addModel",query:{title:"查看模型",activenavIndex:"2",handle:"edit"}})
          
      },
    backups(data){
        this.formDia=true;
        console.log(data);
    },
    cleaned(id){
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for(var i = 0; i < this.tableData.length; i++) {
							if(this.tableData[i].id == id) {
								this.tableData.splice(i, 1);
							}
						}
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        console.log(id);
    }
  }
}
</script>

<style scoped>
.tenancemain{
    padding: 8px;
}
.page{
    text-align: center
}
a{
  color: blue;
    text-decoration: none;
}
.btngroup{
  padding: 8px 0px;
}
</style>